<template>
  <tm-app ref="app">
    <scroll-view class="scroll-box" scroll-y @scrolltolower="getData()">
      <view class="M0" v-if="ListState.list.length===0">
        <tm-result :showBtn="false" subTitle="没有订单提取订单!" title=" "/>
      </view>
      <view class="M1">


        <tm-sheet v-for="(item ) in ListState.list" :key="item.id" :margin="[6,6]">


          <view class="order-card-header">
            <view class="bh">{{ item.id }}</view>
            <view :style="{color:item.state.theme}">{{ item.state.label }}</view>
          </view>
          <view class="order-card-item">
            <view class="label">商品名称</view>
            <view class="value">{{ item.title }}</view>
          </view>
          <view class="order-card-item">
            <view class="label">兑换时间</view>
            <view class="value">{{ item.submitTime }}</view>
          </view>


          <view class="order-card-item" v-if="EmptyUtil.isNotEmptyString(item.expressName)" @click="jumpToCaiNiao(item)">
            <view class="label">快递名称</view>
            <view class="value">{{ item.expressName }}</view>
          </view>
          <view class="order-card-item" v-if="EmptyUtil.isNotEmptyString(item.expressCode)  " @click="jumpToCaiNiao(item)">
            <view class="label">快递单号</view>
            <view class="value">{{ item.expressCode }}</view>
          </view>

          <view class="order-card-item" v-if="EmptyUtil.isNotEmptyString(item.sendTime) ">
            <view class="label">发货时间</view>
            <view class="value">{{ item.sendTime }}</view>
          </view>

          <view class="order-card-footer" v-if="item.address">
            收货信息: {{ item.address.name }} {{ item.address.mobile }} {{ item.address.fullAddress }}
          </view>

          <view class="order-card-footer text-red" v-else @click="addrCtr.open(item)">
            温馨提示:当前订单尚未设置收货信息，请尽快设置收货信息吧!
          </view>
        </tm-sheet>
        <uni-load-more v-if="ListState.moreState !=='noMore'" :status="ListState.moreState"/>
      </view>
    </scroll-view>
    <AddressPop v-if="addrCtr.show" @close="addrCtr.close"/>
  </tm-app>
</template>

<script lang="ts" setup>
import {reactive} from "vue";
import {getEggOrderList, updateEggOrderAddress} from "@/apis";
import {onLoad} from "@dcloudio/uni-app";
import {EmptyUtil, WxmpUtil} from "@/utils";
import UniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import AddressPop from '@/components/address-selector/index.vue'

const ListState = reactive({
  list: [],
  hasNext: true,
  pageSize: 10,
  pageNo: 0,
  moreState: 'more',
})
//加载数据
const getData = async () => {

  if (['noMore', 'loading'].includes(ListState.moreState)) return
  ListState.moreState = "loading"
  ListState.pageNo++
  const {data} = await getEggOrderList({pageSize: ListState.pageSize, pageNo: ListState.pageNo})
  // @ts-ignore
  ListState.list.push(...data.records)


  if (data.hasNext) {
    ListState.hasNext = data.hasNext
    ListState.moreState = "more"
  } else {
    ListState.moreState = "noMore"
  }

}

//重载数据
const reload = async () => {
  ListState.moreState = 'more'
  ListState.pageNo = 0
  ListState.list = []
  await getData()
}

const jumpToCaiNiao = (record: { expressCode: string; }) => {
  window.location.href = "https://page.cainiao.com/guoguo/app-myexpress-taobao/express-detail.html?mailNo=" + record?.expressCode
}


const addrCtr = reactive({
  show: false,
  record: {},
  open: (data: {}) => {
    addrCtr.record = data;
    addrCtr.show = true
  },
  close: async (e) => {

    if (typeof (e) === 'object') {
      const data = {
        id: addrCtr.record.id,
        address: e
      }
      console.log(data,"更细你擦书")
      const res = await updateEggOrderAddress(data)
      await uni.showToast({
        title: '收货地址设置成功',
        icon: 'success'
      })
      await reload()
    }

    addrCtr.record = {};
    addrCtr.show = false

  }
})

onLoad(async () => {
  await WxmpUtil.wxAuthorize()
  await getData()

})


</script>

<style lang="less" scoped>

.scroll-box {
  height: 100vh;

  .M1 {
    width: 100%;
    margin-top: 24rpx;

    padding-bottom: 50rpx;
  }

}

.order-card-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
  padding: 24rpx;
  box-sizing: border-box;

  .bh {
    font-weight: 700;
  }


}


.order-card-footer {
  width: 100%;
  font-size: 13px;
  color: #999999;
  box-sizing: border-box;
  line-height: 2;
  padding: 24rpx;
  border-top: 1px solid #eeeeee;
}

.order-card-item {
  font-size: 26rpx;
  padding: 18rpx 24rpx;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .value {
    color: #666666;
  }
}
</style>